<!DOCTYPE html>
<meta charset=utf8>
<title>Web Animation does not stop even if target is hidden by c-v</title>
<link rel="help" href="https://drafts.csswg.org/css-contain-2/">
<script src="/web-animations/testcommon.js"></script>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#container {
  content-visibility: auto;
}
@keyframes fade {
  from { opacity: 1; }
  to { opacity: 0;  }
}
#target {
  background: green;
  height: 100px;
  width: 100px;
}
.animate {
  animation: fade 1s linear 2 alternate;
}
.transition {
  transition: opacity 1s linear;
}
</style>
<body>
  <div id="spacer"></div>
  <div id="container"></div>
</body>
<script>
"use strict";

function createElementWithWebAnimation(test) {
  const container = document.getElementById('container');
  const target = document.createElement('div');
  container.appendChild(target);
  target.id = 'target';
  const keyframes = [
    { opacity: 1 },
    { opacity: 0 },
  ];
  const options = {
    duration: 2000,
    iterations: 1,
    easing: 'linear',
    direction: 'alternate',
  };
  target.animate(keyframes, options);

  return target;
}

promise_test(async t => {
  // Make sure the target is hidden from the beginning.
  document.getElementById("spacer").style.height = "300vh";
  const target = createElementWithWebAnimation(t);
  const animation = target.getAnimations()[0];

  let animationFinishEvent = false;
  animation.addEventListener('finish', () => {
    animationFinishEvent = true;
  });

  animation.currentTime = 1999;
  await animation.ready;
  await waitForAnimationFrames(2);

  assert_true(animationFinishEvent,
              'Web Animation event should keep going even if target is hidden by c-v');
}, 'Web Animation does not stop even if target is hidden by c-v');

</script>
